<template>
    <a-modal
      v-model:visible="visible"
      title="资产总览列表"
      :width="800"
      :mask="true"
      :maskClosable="false"
      :destroyOnClose="true"
      @cancel="handleCancel"
    >
      <div class="asset-list-container">
        <a-table
          :columns="columns"
          :data-source="dataList"
          :pagination="pagination"
          row-key="id"
          :scroll="{ x: 'max-content' }"
          class="asset-table"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'operation'">
              <a-button type="text" @click="handleViewDetail(record)">查看详情</a-button>
            </template>
          </template>
        </a-table>
      </div>
    </a-modal>
  </template>
  
  <script>
  export default {
    data() {
      return {
        columns: [
          {
            title: '资产编号',
            dataIndex: 'code',
            key: 'code',
            width: 150
          },
          {
            title: '资产名称',
            dataIndex: 'name',
            key: 'name',
            width: 200
          },
          {
            title: '资产类型',
            dataIndex: 'type',
            key: 'type',
            width: 120
          },
          {
            title: '所属部门',
            dataIndex: 'department',
            key: 'department',
            width: 150
          },
          {
            title: '购置日期',
            dataIndex: 'purchaseDate',
            key: 'purchaseDate',
            width: 150
          },
          {
            title: '资产状态',
            dataIndex: 'status',
            key: 'status',
            width: 120
          },
          {
            title: '操作',
            key: 'operation',
            width: 120
          }
        ],
        pagination: {
          pageSize: 5,
          showSizeChanger: false,
          showTotal: (total) => `共 ${total} 条记录`
        },
        dataList: [],
        visible: false
      }
    },
    methods: {
      show(){
        this.visible = true;
        this.dataList = [
          {
            id: '1',
            code: 'ZC2023001',
            name: '办公大楼A座',
            type: '不动产',
            department: '行政部',
            purchaseDate: '2020-01-15',
            status: 'normal'
          },
          {
            id: '2',
            code: 'ZC2023002',
            name: '起重机设备',
            type: '机械设备',
            department: '工程部',
            purchaseDate: '2021-03-22',
            status: 'warning'
          },
          {
            id: '3',
            code: 'ZC2023003',
            name: '商务车',
            type: '交通工具',
            department: '综合部',
            purchaseDate: '2022-05-30',
            status: 'normal'
          }
        ]
      },
      handleCancel() {
        this.$emit('update:visible', false)
      },
      handleViewDetail(record) {
        this.$emit('view-detail', record)
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .asset-list-container {
    background: #0a1629;
    padding: 16px;
    border-radius: 4px;
  }
  
  .asset-table {
    --ant-table-bg: transparent;
    --ant-table-header-bg: #142947;
    --ant-table-header-color: #c9d1d9;
    --ant-table-row-hover-bg: rgba(255, 255, 255, 0.05);
    --ant-table-text-color: #8b949e;
    
    .ant-table-thead > tr > th {
      border-bottom: 1px solid #1f3a60;
    }
    
    .ant-table-tbody > tr > td {
      border-bottom: 1px solid #1f3a60;
    }
    
    .ant-table-pagination {
      color: #8b949e;
      
      .ant-pagination-item {
        background: #142947;
        border-color: #1f3a60;
        
        a {
          color: #8b949e;
        }
      }
      
      .ant-pagination-item-active {
        background: #165dff;
        border-color: #165dff;
        
        a {
          color: #fff;
        }
      }
    }
  }
  
  ::v-deep .ant-modal {
    .ant-modal-content {
      background: #0a1629;
      border: 1px solid #1f3a60;
      border-radius: 8px;
    }
    
    .ant-modal-header {
      background: #142947;
      border-bottom: 1px solid #1f3a60;
      
      .ant-modal-title {
        color: #e6edf3;
        font-weight: 600;
      }
    }
    
    .ant-modal-close {
      color: #8b949e;
      
      &:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }
    }
    
    .ant-modal-footer {
      border-top: 1px solid #1f3a60;
      background: #0a1629;
      
      .ant-btn {
        &:not(.ant-btn-primary) {
          color: #8b949e;
          border-color: #1f3a60;
          background: #142947;
          
          &:hover {
            color: #fff;
            border-color: #385c8e;
            background: #1e3a68;
          }
        }
        
        &.ant-btn-primary {
          background: #165dff;
          border-color: #165dff;
          
          &:hover {
            background: #4080ff;
            border-color: #4080ff;
          }
        }
      }
    }
  }
  </style>